<template>
  <div id="userCRUD">
    <el-table
        :data="tableData.filter(data => !search || data.name.toLowerCase().includes(search.toLowerCase()))"
        style="width: 100%"
        border
        stripe
        :max-height="400"
        empty-text="暂无数据"
    >
      <el-table-column type="selection"></el-table-column>
      <el-table-column
          prop="id"
          label="编号"
          width="180">
      </el-table-column>
      <el-table-column
          label="姓名"
          width="180">
        <template slot-scope="scope">
          <el-popover trigger="hover" placement="top">
            <p>姓名: {{ scope.row.name }}</p>
            <p>邮箱: {{ scope.row.email ? scope.row.email : "暂未绑定邮箱" }}</p>
            <div slot="reference" class="name-wrapper">
              <el-tag size="medium">{{ scope.row.name }}</el-tag>
            </div>
          </el-popover>
        </template>
      </el-table-column>

      <el-table-column
          prop="gender"
          label="性别">
      </el-table-column>

      <el-table-column
          label="日期"
          width="180">
        <template slot-scope="scope">
          <i class="el-icon-time"></i>
          <span style="margin-left: 10px">{{ scope.row.birthday }}</span>
        </template>
      </el-table-column>

      <el-table-column label="操作">
        <template slot="header" slot-scope="scope">
          <el-input
              v-model="search"
              size="mini"
              placeholder="输入关键字搜索"/>
        </template>
        <template slot-scope="scope">
          <el-button
              size="mini"
              @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
          <el-popconfirm
              confirm-button-text='好的'
              cancel-button-text='不用了'
              icon="el-icon-info"
              icon-color="red"
              title="确定删除吗？"
              @confirm = "handleDelete(scope.$index, scope.row)"
          >
            <el-button
                slot="reference"
                size="mini"
                type="danger"
            >删除</el-button>
          </el-popconfirm>
        </template>
      </el-table-column>
    </el-table>
    <!--分页-->
    <el-row>
      <el-col :span="12" :offset="5">
        <el-pagination
            background
            style= "margin-top: 10px"
            layout="prev, pager, next,jumper,total,sizes"
            :page-size="size"
            :current-page="pageNow"
            :page-sizes="[2,5,10,50]"
            :total="total"
            @current-change="findPage"
            @size-change="findSize"
        >
        </el-pagination>
      </el-col>
    </el-row>

    <!--添加按钮-->
    <el-row>
      <el-col :span="6" :offset="0">
        <el-button @click="addUser" style="margin: 10px 0;" type="success" size="mini">添加</el-button>
      </el-col>
    </el-row>

    <!--表单-->
    <transition name="el-zoom-in-center">
      <div v-show="show" class="transition-box">

        <el-form :hide-required-asterisk="false" :rules="rules" ref="userForm" :model="form" label-width="80px">
          <el-form-item label="姓名" prop="name">
            <el-input v-model="form.name"></el-input>
          </el-form-item>

          <el-form-item label="密码">
            <el-input type="password" v-model="form.password"></el-input>
          </el-form-item>

          <el-form-item label="性别">
            <el-radio-group v-model="form.gender">
              <el-radio label="男" value="male"></el-radio>
              <el-radio label="女" value="female"></el-radio>
            </el-radio-group>
          </el-form-item>

          <el-form-item label="生日">
            <el-date-picker type="date" value-format="yyyy-MM-dd" placeholder="选择日期" v-model="form.birthday" style="width: 100%;"></el-date-picker>
          </el-form-item>

          <el-form-item label="邮箱">
            <el-input placeholder="请输入邮箱" v-model="form.email">
              <template slot="append">@</template>
            </el-input>
          </el-form-item>

          <el-form-item>
            <el-button type="primary" @click="onSubmit('userForm')">确认</el-button>
            <el-button @click="cancel">取消</el-button>
          </el-form-item>
        </el-form>
      </div>
    </transition>
  </div>
</template>

<script>
export default {
  name: "UserCRUD",
  data() {
    return {
      tableData: [],
      total: 0,
      size: 5,
      pageNow: 1,

      search: "",
      show: false,
      form: {
        name: '',
        password: '',
        gender: '男',
        birthday: '',
        email: ''
      },
      rules: {
        name: [
          { required: true, message: '请输入用户姓名...', trigger: 'blur' },
          { min: 3, max: 5, message: '长度在 3 到 5 个字符', trigger: 'blur' }
        ]
      }
    }
  },
  methods: {
    findPage(page) {
      this.pageNow = page;
      this.findAllUser(page,this.size);
    },
    findSize(size) {
      this.size = size;
      this.findAllUser(this.pageNow,size);
    },
    cancel() {
      this.show = false;
    },
    addUser() {
      this.show = true;
      this.form = {gender: '男'};
    },
    handleEdit(index,row) {
      this.show = true;
      this.form = row;
    },
    handleDelete(index,row) {
      this.$http.delete("/user/delete",{params:{id: row.id}}).then((response)=>{
        if(response.data.code){
          this.$message({
            message: "恭喜您！" + response.data.extend.message,
            type: 'success'
          });
          this.findAllUser(1,5);
        }
        else {
          this.$message({
            message: "很抱歉！" + response.data.extend.message,
            type: 'error'
          })
        }
      });
    },
    onSubmit(userForm) {
      this.$refs[userForm].validate((valid) => {
        if (valid) {
          this.$http.post("/user/addOrUpdate",this.form).then((response)=>{
            if(response.data.code){
              this.$message({
                message: "恭喜您！" + response.data.extend.message,
                type: 'success'
              });
              this.form = {sex: '男'};
              this.show = false;
              this.findAllUser();
            }
            else {
              this.$message({
                message: "很抱歉！" + response.data.extend.message,
                type: 'error'
              })
            }
          });
        }
        else {
          this.$message({
            message: "很抱歉！输入数据不合法！",
            type: 'error'
          })
          return false;
        }
      });

    },
    findAllUser(page,size) {
      page= page? page : this.pageNow;
      size= size? size : this.size;
      this.$http.get("/user/findByPage?pageNow="+page+"&pageSize="+size).then((response)=>{
        this.tableData = response.data.extend.results.users;
        this.total = response.data.extend.results.totals;
      });
    }
  },
  created() {
    this.findAllUser();
  }
}
</script>

<style scoped>
.transition-box {
  margin-bottom: 10px;
  width: 100%;
  height: 400px;
  border-radius: 4px;
  background-color: #d7e2ec;
  color: #fff;
  padding: 40px 20px;
  box-sizing: border-box;
  margin-right: 20px;
}
</style>